<template>
  <view class="container">
	<!-- logo -->
	<view class="logo">
		<span class="logo-btn">ASI</span>
	</view>
	<!-- 搜索框和按钮 -->
    <view class="url-bar">
      	<input v-model="url" class="search-iput"></input>
		<button @click="loadUrl" class="search-btn"> <uni-icons type="search" color="#999" size="20"></uni-icons></button>
    </view>
	<!-- 路由区 -->
	<web-view v-if="showWebView" :src="fullUrl"></web-view>
	<!-- 菜单区 -->
	<view v-if="show" class="uni-menu">
			<uni-grid :column="4" >
				<uni-grid-item v-for="(item, index) in items" :key="item.id" >
					<view class="menu-text" @click="handleClick(item)">
						<uni-icons type="image" :size="30" color="#777" />
						<text class="text">{{item.name}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
	</view>
	<view v-if="hide" class="uni-menu2">
			<uni-grid :column="4">
				<uni-grid-item v-for="(item, index) in folder" :key="item.id">
					<view class="menu-text" @click="handleClick(item)">
						<uni-icons type="image" :size="30" color="#777" />
						<text class="text">{{item.name}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
	</view>
	<!-- 底部导航栏 -->
					
					
	
	<view class="uni-footer">
		<uni-row class="demo-uni-row" :width="nvueWidth">
					<!-- 菜单 -->
					<uni-col :span="6">
						<button @click="showDrawer('showLeft')"><uni-icons type="list" color="#999" size="20"></uni-icons></button>
					</uni-col>
					<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
						<view class="menu-btn">
							<button @click="closeDrawer('showLeft')"><uni-icons type="closeempty" color="#999" size="20"></uni-icons></button>
						</view>
					</uni-drawer>
					<!-- 未开发 -->
					<uni-col :span="6">
						<button @click="onClick" class="demo-uni-col light"><uni-icons type="up" color="#999" size="20"></uni-icons></button>
					</uni-col>
					<!-- 分享弹出 -->
					<uni-col :span="6">
						<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
							<uni-popup-share></uni-popup-share>
						</uni-popup>
						<button @click="shareToggle" class="demo-uni-col dark"><uni-icons type="redo" color="#999" size="20"></uni-icons></button>
					</uni-col>
					<!-- 未开发 -->
					<uni-col :span="6">
						<button @click="onClick" class="demo-uni-col light"><uni-icons type="chat" color="#999" size="20"></uni-icons></button>
					</uni-col>
				</uni-row>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  showLeft: false,
	  url: "",
	  fullUrl: "",
	  showWebView: false,
	  show:true,
	  hide:false,
      items:[
		  {id:1,name:"CSDN",},
		  {id:2,name:"码云"},
		  {id:3,name:"开源中国"},
		  {id:4,name:"更多"}
	  ],
	  folder:[
		  {id:1,name:"知乎"},
		  {id:2,name:"豆瓣"},
		  {id:3,name:"今日热榜"},
		  {id:9,name:"今日头条"},
		  {id:5,name:"起点中文网"},
		  {id:6,name:"网易云音乐"},
		  {id:7,name:"QQ音乐"},
		  {id:8,name:"酷狗音乐"},
	  ]
    };
  },
  methods: {
    handleClick(item) {
		if(item.id!=4){
			uni.showToast({
			    title: '操作失败,功能未完善',
			    icon: 'none', // 或者 'error'，取决于你想要的效果
			    duration: 2000
			});
		}
		if(item.id=== 4){
			this.show=false;
			this.hide=true;
		}
    },
	onClick(){
		uni.showToast({
		    title: '操作失败,功能未完善',
		    icon: 'none', // 或者 'error'，取决于你想要的效果
		    duration: 1000
		});
	},
	shareToggle() {
		this.$refs.share.open()
	},
	 loadUrl() {
	    if (!this.url) return;
	    // 补全协议（如用户输入 example.com → https://example.com）
	    this.fullUrl = this.url.startsWith("http") ? this.url : `https://${this.url}`;
		this.show=false;
	    this.showWebView = true;
	},
	confirm() {},
				// 打开窗口
				showDrawer(e) {
					this.$refs[e].open()
				},
				// 关闭窗口
				closeDrawer(e) {
					this.$refs[e].close()
				},
				// 抽屉状态发生变化触发
				change(e, type) {
					console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
					this[type] = e
	}
  },
  onNavigationBarButtonTap(e) {
  			if (this.showLeft) {
  				this.$refs.showLeft.close()
  			} else {
  				this.$refs.showLeft.open()
  			}
  		},
  		// app端拦截返回事件 ，仅app端生效
  		onBackPress() {
  			if (this.showRight || this.showLeft) {
  				this.$refs.showLeft.close()
  				this.$refs.showRight.close()
  				return true
  			}
  		}
};
</script>

<style scoped>
.container{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;	
}
.logo{
	margin-top: 20%;
}
.logo-btn{
	color:DimGray ;
	font-size: 50px;
	text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}
.url-bar{
	margin-top: 5%;
	width: 80%;	
	display: flex;
	align-items: center;
}
.search-iput{
	opacity: 0.5;
	border:DimGray 1px solid;
	border-radius: 5px;
	height: 46px;
	flex: 1;
}
.uni-menu{
	margin-top: 5%;
	width: 80%;	
}
.menu-text{
	font-size: 12px;
	margin-top: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.menu-btn{
	width: 15%;
	height: 7%;
	float: right;
}
.uni-menu2{
	margin-top: 5%;
	width: 80%;	
}
.uni-footer{
	text-align: center;
	  position: absolute; /* 绝对定位 */
	  bottom: 0; /* 紧贴底部 */
	  width: 100%; /* 全宽 */
	  height: 50px; /* 高度 */
	  background-color: #f8f8f8; /* 背景色 */
}
</style>